<p>The red and yellow boxes should follow the green box when you scroll any scrollbar.</p>

<style>
	#container { height:1000px; }
	#inner-container1 { height:200px; overflow:scroll; margin:100px 0; width:40%; }
	#inner-container2 { height:200px; overflow:scroll; width:40%; position:fixed; top:185px; right:0; }
	.red { width:30px; height:30px; background:red; margin:120px auto; }
	.green { width:30px; height:30px; background:green; }
	.yellow { width:30px; height:30px; background:yellow; }
	#red0 { margin:0 0 0 50px; }
</style>

<div id="red0" class="red"></div>
<div id="green0" class="green"></div>
<div id="yellow0" class="yellow"></div>

<div id="container">
	<div id="inner-container1">
		<div id="red1" class="red"></div>
		<div id="green1" class="green"></div>
		scroll
	</div>
	<div id="inner-container2">
		<div id="red2" class="red"></div>
		<div id="green2" class="green"></div>
		scroll
	</div>
</div>

<div id="yellow1" class="yellow"></div>
<div id="yellow2" class="yellow"></div>
<script src="/depender/build?require=More/Element.Position,Core/Element.Event"></script>

<script>
	var position = function(){
		['0','1','2'].each(function(post){
			$('green' + post).position( {relativeTo: $('red' + post), position: 'centerRight', edge: 'centerLeft'});
			$('yellow' + post).position({relativeTo: $('red' + post), position: 'centerLeft', edge: 'centerRight'});
		});
	};

	position();
	window.addEvent('scroll', position);
	$('inner-container1').addEvent('scroll', position);
	$('inner-container2').addEvent('scroll', position);
</script>
